<template>
  <el-row>
    <el-col :span="24">
      <el-card class="search-form">
        <el-form ref="searchForm" class="el-form-col" :model="search">
          <el-row :gutter="15">
            <el-col :lg="4" :md="6">
              <el-form-item prop="address">
                <el-input v-model="search.address" placeholder="地址名称：模糊搜索" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :lg="4" :md="6">
              <el-form-item prop="startAddressArr">
                <CascadeAddress v-model="search.startAddressArr" :level="3" changeOnSelect placeholder="起点"/>
              </el-form-item>
            </el-col>
            <el-col :lg="4" :md="6">
              <el-form-item prop="endAddressArr">
                <CascadeAddress v-model="search.endAddressArr" :level="3" changeOnSelect placeholder="终点"/>
              </el-form-item>
            </el-col>
            <el-col :lg="4" :md="6">
              <el-form-item prop="lineState">
                <el-select v-model="search.lineState" clearable placeholder="线路状态">
                  <el-option label="运营中" value="1"></el-option>
                  <el-option label="已停运" value="0"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="2" class="text-center">
              <el-button type="primary" :loading="searchLoading" plain native-type="submit" @click.prevent="searchFunc(search)"><span>搜索</span></el-button>
            </el-col>
            <!--<el-col :span="2" class="text-center">-->
            <!--<el-button type="primary" plain @click="isOpen = !isOpen">{{ isOpen ? '收起' : '展开' }}</el-button>-->
            <!--</el-col>-->
            <el-col :span="2" class="text-center">
              <el-button @click="resetFields" plain>重置</el-button>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
    </el-col>
    <el-col :span="24">
      <BasicTable
        ref="BasicTable"
        url="/ms-warehouse-trunk/line/get-trunk-line-list"
        :tabs="tabs"
        @selection-change="setRows"
        :columns="columns">
        <template slot="buttons">
          <el-button type="success" @click.prevent="startLine(null, 1)">批量开启</el-button>
          <el-button type="warning" @click.prevent="startLine(null, 0)">批量关闭</el-button>
          <el-button type="primary" @click.prevent="edit">新增线路</el-button>
        </template>
        <template slot="column">
          <el-table-column fixed="right" width="120px" align="center" label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                @click="show(scope.row)"
              >
                查看
              </el-button>
              <el-button
                size="mini"
                type="text"
                @click="edit(scope.row)"
              >
                编辑
              </el-button>
              <el-button
                v-if="scope.row.lineState == 1"
                size="mini"
                type="text"
                @click="startLine(scope.row, 0)"
              >
                关闭
              </el-button>
              <el-button
                v-if="scope.row.lineState == 0"
                size="mini"
                type="text"
                @click="startLine(scope.row, 1)"
              >
                开启
              </el-button>
            </template>
          </el-table-column>
        </template>
      </BasicTable>
    </el-col>
  </el-row>
</template>
<script>
import {copy, dotData, arrayColumn, alert, confirm} from '@/utils'
import {unixTimestampFilter, decimalNumFilter} from '@/filters'
export default {
  name: 'trunkLineIndex',
  data() {
    return {
      isOpen: false,
      searchLoading: false,
      tabs: [],
      rows: [],
      search: {
        address: '',
        startAddressArr: [],
        endAddressArr: [],
        lineState: ''
      },
      searchOpen: false,
      columns: [
        {
          label: '起点',
          data: 'start',
          render: (data, full) => {
            return `${full.startProvince} - ${full.startCity} - ${full.startDistrict}`
          }
        },
        {
          label: '终点',
          data: 'end',
          render: (data, full) => {
            return `${full.endProvince} - ${full.endCity} - ${full.endDistrict}`
          }
        },
        {
          label: '状态',
          data: 'lineState',
          render: (data, full) => {
            return data === 1 ? '运营中' : '已停用'
          }
        },
        {
          label: '承诺时效',
          data: 'aging',
          render: (data, full) => {
            return data + ' 天'
          }
        },
        {
          label: '起步价(元)',
          data: 'startingPrice',
          render(data, full) {
            return decimalNumFilter(data)
          }
        },
        {
          label: '轻货价格(元/m³)',
          data: 'lightPrice',
          render(data, full) {
            return decimalNumFilter(data)
          }
        },
        {
          label: '重货价格(元/KG)',
          data: 'heavyPrice',
          render(data, full) {
            return decimalNumFilter(data)
          }
        },
        {
          label: '创建时间',
          data: 'foundtime',
          render(data, type, full, meta) {
            return unixTimestampFilter(data)
          }
        }
      ]
    }
  },
  methods: {
    // 搜索
    searchFunc(search) {
      const basicTable = this.$refs.BasicTable
      if (basicTable) {
        let params = copy(search)
        params.startProvinceNo = dotData(params, 'startAddressArr[0]') || ''
        params.startCityNo = dotData(params, 'startAddressArr[1]') || ''
        params.startDistrictNo = dotData(params, 'startAddressArr[2]') || ''
        delete params.startAddressArr
        params.endProvinceNo = dotData(params, 'endAddressArr[0]') || ''
        params.endCityNo = dotData(params, 'endAddressArr[1]') || ''
        params.endDistrictNo = dotData(params, 'endAddressArr[2]') || ''
        delete params.endAddressArr
        this.searchLoading = true
        basicTable.search(params).finally(_ => {
          this.searchLoading = false
        })
      }
    },
    // 重置表单
    resetFields() {
      const searchForm = this.$refs.searchForm
      if (searchForm) {
        searchForm.resetFields()
      }
    },
    // 表格刷新
    refresh() {
      this.searchFunc(this.search)
    },
    // 选中的值
    setRows(rows) {
      this.rows = rows
    },
    // 批量开启
    startLine(row, lineState) {
      let ids = []
      if (row) {
        ids.push(row.id)
      } else if (this.rows.length > 0) {
        ids = arrayColumn(this.rows, 'id')
      } else {
        alert('请选择线路')
      }

      let postData = {
        ids: ids,
        lineState: lineState
      }
      let content = lineState === 1 ? '启用' : '停用'
      confirm('你确定要' + content + '线路吗？', '温馨提示', {
        confirmButtonLoading: true,
        type: 'warning',
        center: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        confirmCallBack: ({confirmButtonLoadingClose, close}) => {
          return this.$ajax.post('/ms-warehouse-trunk/line/start-line', postData).then(response => {
            if (response.success) {
              close().then(_ => {
                this.$message({
                  type: 'success',
                  message: '操作成功!'
                })
                this.refresh()
              })
            } else {
              confirmButtonLoadingClose()
            }
          }).finally(_ => {
            confirmButtonLoadingClose()
          })
        }
      })
    },
    // 详情
    show(data) {
      this.$router.push({path: '/ss-oms/trunkLine/show/' + data.id})
    },
    // 新增 修改
    edit(data) {
      let id = '' // 新增
      if (data) {
        id = data.id // 修改
      }
      this.$router.push({path: '/ss-oms/trunkLine/edit', query: {id: id}})
    }
  }
}
</script>
